#{extends 'main.html' /}
#{set title:'Ajouter une Fiche' /}

<!--  Loading Markitup -->
<link rel="stylesheet" type="text/css" href="@{'/public/markitup/skins/markitup/style.css'}" />
<script type="text/javascript" src="@{'/public/markitup/jquery.markitup.js'}"></script>
<link rel="stylesheet" type="text/css" href="@{'/public/markitup/sets/html/style.css'}" />
<script type="text/javascript" src="@{'/public/markitup/sets/html/set.js'}"></script>
<!-- End markitup -->

#{form @readingsheetmngt.add(), method:'POST', id:'createSheetForm'}

#{ifErrors}
  <div class="error">
   <p><strong>Oops…</strong> Veuillez corriger les erreurs indiquées avant d'essayer à nouveau.</p>
  </div>
#{/ifErrors}

<p>
  <label>Livre : </label>
  #{select 'readingsheet.book.id', items:bookList, valueProperty:'id', labelProperty:'titleAndAuthor', id:'book_for_sheet'}
  #{option ''}...#{/option}
  #{/select}
  <span class="error">#{error 'readingsheet.book' /}</span>
  <button id="cmd_add_book" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Ajouter un livre</button>
</p>

#{field 'readingsheet.grade'}
<p>
    <label>Etoile : </label>
  	<span class="starcontainer">
		<span class="star"></span>
		<span class="star"></span>
		<span class="star"></span>
		<span class="star"></span>
		<span class="star"></span>
		<input type="hidden" id="${field.id}" name="${field.name}" value="${flash[field.name]}" class="starvalue ${field.errorClass}" />
	</span>
	<span class="error">#{error 'readingsheet.grade' /}</span>
</p>
#{/}


#{field 'readingsheet.readingdate'}
<p>
  <label>Date de lecture : </label>
  <input type="text" id="${field.id}" name="${field.name}" value="${flash[field.name]}" class="${field.errorClass} hasdatepicker">
  <span class="error">#{error 'readingsheet.readingdate' /}</span>
</p>
#{/}

<div class="col-50">
#{field 'readingsheet.resume'}
<p>
  <label>Résumé : </label>
  <textarea col="30" row="30" id="${field.id}" name="${field.name}">${flash[field.name]}</textarea>
</p>
#{/}
</div>

<div class="col-50 last">
#{field 'readingsheet.comment'}
<p>
  <label>Commentaire personnel : </label>
  <textarea col="30" row="30" id="${field.id}" name="${field.name}">${flash[field.name]}</textarea>
</p>
#{/}
</div>

<p>
  <label>Visibilité : </label>
  #{select 'readingsheet.right'}
  #{option '0'}privée#{/option}
  #{option '1'}publique#{/option}
  #{option '2'}todo#{/option}
  #{/select}
</p>



<div class="btn-container">
	<input class="btn ok ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Ajouter" />
	<button class="btn cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Annuler</button>
</div>
#{/form}


<script language="javascript" type="text/javascript">
	$('.btn-container .btn.cancel').click(function() {
		console.log("TODO");
		return false;
	});
	
	var addBookAction = #{jsAction @bookmngt.addForm(':from') /}
	$('#cmd_add_book').click(function() {
		var url = addBookAction({from: '${from}'});
		console.log(url);
		window.location = url;
		return false;
	});
	
	 $('#readingsheet_comment').markItUp(mySettings);
	 $('#readingsheet_resume').markItUp(mySettings);
</script>



